<template>

    <div>
        <el-dialog title="修改密码" v-model="diavisible" width="500">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleform" :rules="rules" label-width="auto">

                <el-form-item prop="password" label="密码">
                    <el-input v-model="ruleform.password" type="password" placeholder="请输入密码" />

                </el-form-item>
                <el-form-item prop="repassword" label="确认密码">
                    <el-input v-model="ruleform.repassword" type="password" placeholder="请输入确认密码" />

                </el-form-item>
                <el-form-item>
                    <div style="text-align: right;    width: 100%;">
                        <el-button style="float: right;margin-left:10px" @click="reset" type="primary">取消</el-button>
                        <el-button style="float: right;" @click="send" type="primary">确定</el-button>
                    </div>
                </el-form-item>
            </el-form>

        </el-dialog>


    </div>
</template>
<script setup>
import service from '@/utils/Request';
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
const emit = defineEmits(["updatepassword"])

const rules = {

    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    repassword: [
        { required: true, message: '请输入确认密码', trigger: 'blur' },
    ],
}
const diavisible = ref(false)
const ruleform = ref({
    password: "",
    repassword: ""
});
const open = () => {

    diavisible.value = true



}
const ruleFormRef = ref(null)
const send = async () => {
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            if (ruleform.value.password !== ruleform.value.repassword) {
                console.log("1234")
                return ElMessage({
                    type: "warning",
                    message: "两次输入密码不正确"
                })
            }
            const res = await service.post("/updatePassword", ruleform.value);
            console.log(res)
            diavisible.value = false

        }
    })

}
const reset = () => {
    diavisible.value = false
}
defineExpose({
    open
})
</script>